<template>
  <div class="action_bar">
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" dot />
      <van-action-bar-icon
        icon="cart-o"
        text="购物车"
        :badge="count"
        @click="goCar"
      />
      <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
      <van-action-bar-button
        type="warning"
        text="加入购物车"
        @click="handJoinCar"
      />
      <van-action-bar-button
        type="danger"
        text="立即购买"
        @click="handGoPlay"
      />
    </van-action-bar>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, onMounted } from "vue";
import { addCart } from "@/utils/apis/cart";
import { Toast } from "vant";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default defineComponent({
  components: {},
  props: {
    goodsId: {
      type: Number,
      default: -1,
    },
  },
  setup(props) {
    const store = useStore();
    const router = useRouter();
    onMounted(() => {
      store.dispatch("goodsCar/getGoodsCount");
    });
    const count = computed(() => {
      return store.state.goodsCar.count;
    });
    async function handJoinCar() {
      await addCart({ goodsCount: 1, goodsId: props.goodsId });
      Toast.success("加入成功");
      store.dispatch("goodsCar/getGoodsCount");
    }
    async function handGoPlay() {
      await addCart({ goodsCount: 1, goodsId: props.goodsId });
      store.dispatch("goodsCar/getGoodsCount");
      router.push({
        path: "/shoppingCar",
      });
    }
    function goCar() {
      router.push({
        path: "/shoppingCar",
      });
    }
    return { handJoinCar, count, goCar, handGoPlay };
  },
});
</script>
<style lang="scss" scoped>
</style>
